import React from 'react'
import { connect } from 'dva'
import { isEmpty, cloneDeep, find, sortBy, pick } from 'lodash'
import { Form, Modal, Row, Spin, Col, Input, Select, Tabs, Table, Tooltip, Button, Icon, Popconfirm, Radio, Tag, DatePicker } from 'antd'
import { listConfig } from 'config/config'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index.jsx'
import { mapStateToProps } from 'utils/view_utils'
import styles from './threadDetailStyle.less'
import cx from 'classnames'
import moment from 'moment';

const Option = Select.Optioncomponents
const RadioGroup = Radio.Group
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { MonthPicker, RangePicker } = DatePicker;
const routeView = function ({ dispatch, model, form }) {
    const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
    const { modelObj, namespace } = model
    const { detailData, activeKey, tableData, queryCondition, listData,signInfo, relationList,activityId, clueId } = modelObj
    console.log('modelObj', modelObj)
    console.log('clueId:', clueId)

    const formItemLayout = {
        labelCol: { span: 9 }, wrapperCol: { span: 15}
    };

    const columns = [
        { title: '客户状态', dataIndex: 'statusName', key: 'statusName' },
        { title: '状态时间', dataIndex: 'createTime', key: 'createTime' },
        { title: '操作人', dataIndex: 'operator', key: 'operator', },
    ];
    const signInfoColumns = [
        { title: '成交房间', dataIndex: 'houseFullName', key: 'houseFullName' },
        { title: '资产ID', dataIndex: 'houseId', key: 'houseId' },
        { title: '客户', dataIndex: 'customerNames', key: 'customerNames', },
        { title: '置业顾问', dataIndex: 'saleMemberAccountNames', key: 'saleMemberAccountNames', },
        { title: '单据状态', dataIndex: 'contractDocumentStatusName', key: 'contractDocumentStatusName', },
        { title: '业务类型', dataIndex: 'buinessTypeCode', key: 'buinessTypeCode',render:(data)=>{
            return {'SD100101':'小订','SD100102':'认购','SD100103':'签约'}[data]
        }},
        { title: '成交总价', dataIndex: 'dealPrice', key: 'dealPrice', },
        { title: '签约单号', dataIndex: 'contractCode', key: 'contractCode', },
    ];
    const relationColumns = [
        { title: '联名客户', dataIndex: 'name', key: 'name' },
        { title: '线索ID', dataIndex: 'clueId', key: 'clueId' },
        { title: '联名客户手机', dataIndex: 'mobile', key: 'mobile', },
        { title: '项目名称', dataIndex: 'productName', key: 'productName', },
        { title: '渠道来源', dataIndex: 'opSource', key: 'opSource', },
        { title: '线索创建时间', dataIndex: 'createTime', key: 'createTime', }
    ];
    //model数据更新
    function inputChange(name, value) {
        dispatch({
            type: `${namespace}/updateStore`,
            payload: Object.assign(queryCondition, { [name]: value })
        });
    }

    //导出
    // async function downLoad() {
    //     await dispatch({
    //         type: `${namespace}/downLoad`,
    //         payload: { activityId }
    //     });
    // }

    return <div className="public_listMain">
        <div className={'customForm'}>
            <CollapsiblePanels title='客户信息'>
                <Form autoComplete="off" className="auto-wrap">
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户名称">
                                <div>{detailData.name}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="线索ID">
                                <div>{detailData.clueId}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户电话">
                                <div>{detailData.mobile}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="产品名称">
                                <div>{detailData.productName}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="渠道来源">
                                <div>{detailData.opSource}</div>
                            </FormItem>
                        </Col>
                        {/* <Col span={12}>
                            <FormItem {...formItemLayout} label="产品名称">
                                <div>{detailData.productName}</div>
                            </FormItem>
                        </Col> */}
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="推荐人">
                                <div>{detailData.referrerName}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="推荐人手机">
                                <div>{detailData.referrerMobile}</div>
                            </FormItem>
                        </Col> 
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="推荐人类型">
                                <div>{detailData.referrerType}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="推荐状态">
                                <div>{detailData.expired?'已失效':'正常'}</div>
                            </FormItem>
                        </Col>
                    </Row>
                    <Row style={{ borderBottom: "1px solid #EFF0F2" }}>
                        {/* <Col span={12}>
                            <FormItem {...formItemLayout} label="客户状态">
                                <div>{detailData.expired?'已失效':'正常'}</div>
                            </FormItem>
                        </Col> */}
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="失效原因">
                                <div>{detailData.expiredMsg}</div>
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="跟进客户时间">
                                <div>{detailData.followUpTime}</div>
                            </FormItem>
                        </Col> 
                    </Row>

                </Form>
            </CollapsiblePanels>


        </div>

        {/* <div className="boxShadow" > */}
        <CollapsiblePanels title='客户状态'>
            <Table
                columns={columns}
                dataSource={listData}
            // pagination={pagination}
            />
        </CollapsiblePanels>
        <CollapsiblePanels title='成交信息'>
            <Table
                columns={signInfoColumns}
                dataSource={signInfo}
            // pagination={pagination}
            />
        </CollapsiblePanels>
        <CollapsiblePanels title='联名客户信息'>
            <Table
                columns={relationColumns}
                dataSource={relationList}
            // pagination={pagination}
            />
        </CollapsiblePanels>
        {/* <div style={{ marginBottom: 48 }}>
                {
                    <Button type="primary" style={{ position: "absolute", right: 120 }} onClick={() => {
                        downLoad(activityId)
                    }
                    }>导出</Button>
                }
            </div> */}


        {/* </div> */}
        

    </div>
}

export default connect(mapStateToProps)(Form.create()(routeView))
